<template>
  <div class="g-selector">
    <div class="item-selector">
      <div class="icon-selector" :class="{ 'selector-active': tSelect }">
        <input type="checkbox" v-model="tSelect" />
      </div>
    </div>
    <span>全选</span>
  </div>
</template>
<script>
export default {
    name:"SelectAll",
    computed:{
        cartData(){
            return this.$store.state.cartData;
        },
        // 11 全选   全不选
        tSelect:{
            get(){
                // let num=this.cartData.filter(item=>item.select).length;
                
                // localStorage.setItem('totalSelect',this.cartData.length==num);

                // return this.cartData.length==num;

                const boo=this.cartData.every(item=>item.select);
                localStorage.setItem('totalSelect',boo);
                return boo;
            },
            set(value){
                console.log(value);
                this.$store.dispatch('setTotalSelect',value)
            }
        },
    }
}
</script>
<style lang="scss" scoped>
    
.icon-selector {
  position: relative;
  margin: .16rem auto 0 auto;
  width: .16rem;
  height: .16rem;
  border-radius: 50%;
  border: .02rem solid #ccc;
  cursor: pointer;
  input{
    width: .16rem;
    height: .16rem;
    opacity: 0;
  }
}
.selector-active{
  background-color: #7a45e5;
  border-color: #7a45e5;
}

.g-selector {
  float: left;
  width: 70px;
  margin-left: 4%;
  height: 5.02rem;
  cursor: pointer;
}

.g-selector .item-selector {
  position: relative;
  display: inline-block;
}

.g-selector span {
  position: absolute;
  margin-left: 20px;
  color: #5f646e;
  top: 15px;
}
</style>